<template>
	<view class="content">
		<view class="header">
			<view class="nav">
				<view>
					<uni-icons color="white" size="22" type="back" @click="pageTo('/pages/tabbar/tabbar-4/tabbar-4')"></uni-icons>
				</view>
				<view>
					个人资料
				</view>
				<view @click="pageTo('/pages/tabbar/tabbar-4/tabbar-4')">
					保存
				</view>
			</view>
			<view class="header-bottom">
				<view class="head-portrait-background">
					<view class="head-portrait">
						
					</view>
				</view>
				<br/>
				<view class="phone-login" @click="pageTo()">
					手机账号登录
				</view>
			</view>
		</view>
		<view>
			<ul class="info-list">
				<li>
					<span>昵称：</span>
					<input class="uni-input" focus placeholder="请输入昵称" v-model="userName" style="display: inline-flex;color: #99a4bd;"/>
				</li>
				<li>
					<span>性别：</span>
					<input class="uni-input" placeholder="请输入性别" v-model="sex" style="display: inline-flex;color: #99a4bd;"/>
				</li>
				<li>
					<span>介绍：</span>
					<input class="uni-input" placeholder="请输入介绍" v-model="introduce" style="display: inline-flex;color: #99a4bd;"/>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		comments:{
			uniIcons
		},
		data() {
			return {
				userName: '刘家奇',
				sex: '男',
				introduce: '暂无'
			}
		},
		methods: {
			pageTo(url){
				uni.switchTab({
				    url: url,
				});
				
			}
		}
	}
</script>

<style>
	.header{
		background-color: #33b17b;
		color: white;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		padding: 10px;
		padding-top: 35px;
	}
	.header-bottom{
		margin-top: 10px;
		text-align: -webkit-center;
	}
	.head-portrait-background{
		width: 84px;
		height: 84px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #2c996b;
		opacity: 0.8;
		border-radius: 43px;
	}
	.head-portrait{
		width: 76px;
		height: 76px;
		border-radius: 38px;
		background:url(../../static/img/portrait/head_portrait.jpg) no-repeat;
		background-size: 100%;
		line-height: 84px;
		z-index: 999;
	}
	.phone-login{
		padding-bottom: 20px;
	}
	.info-list{
		list-style: none;
		padding-left: 15px;
	}
	.info-list li{
		height: 50px;
		line-height: 50px;
	}
	.info-list span{
		color: #505050;
		font-size: 16px;
	}
</style>
